<template>
  <div id="home" >

<!--  头部标题栏  -->
    <nav-bar>
      <template v-slot:center>
        购物街
      </template>
    </nav-bar>

<!--  主体内容  -->
<!--  轮播图  -->
    <LunBo :lunbo-list="lunboList" />
<!--  推荐内容  -->
    <RecommerdView :recommends="recommends"/>
<!--  feature内容  -->
    <FeatureView :feature-list="featureList"></FeatureView>
<!--  分类顶部导航栏  -->
    <TabControl @tabClick="tabClick" :tabList="tabControl"></TabControl>
<!--  商品展示区  -->
    <commodity-list :commoditys="goods[tagName].list"></commodity-list>



    <ul>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
    </ul>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar";
import {getHomeMultidata,getHomeGoods} from "@/network/home";
import LunBo from "@/components/common/lunbo/LunBo";
import RecommerdView from "@/views/home/childComps/RecommendView";
import FeatureView from "@/views/home/childComps/FeatureView";
import TabControl from "@/components/content/tabControl/TabControl";
import CommodityList from "@/components/common/commodityList/commodityList";

export default {
  name: "Home",
  components: {CommodityList, TabControl, FeatureView, RecommerdView, LunBo, NavBar},
  data() {
    return {
      lunboList: [],//存放轮播图的数据
      recommends: [],//存放活动的数据
      featureList: [],//存放推荐的数据(8个元素)
      tabControl: ['流行', '新款', '精选'],//顶部分类导航栏区
      goods: {//存放流行，新款，精选的数据
        'pop': {'page': 1, 'list': []},
        'new': {'page': 1, 'list': []},
        'sell': {'page': 1, 'list': []},
      },
      tagName:"pop",//标志位，为了保存单击tabControl的结果,
      scrollTop:4500,//当用户持续下拉列表时，该变量保存屏幕宽度，然后逐渐翻倍递增
    }
  },
  created() {
    //使用tabbar组件
    this.$store.commit('alertMyTage',true);

    //  1.请求多个数据
    this.getHomeMultidata();
    //  2.获取商品列表
    this.getHomeGoods('pop');//同时请求三种类型的数据
    this.getHomeGoods('new');
    this.getHomeGoods('sell');
    //当我们再次调用时，page就会+1，然后添加到状态中

    //每当界面进入时，都返回最顶部
    document.body.scrollTop=0;
  },
  methods:{
    //为了让create中的代码看上去更加简洁，我们把逻辑写在methods中，通过this.调用
    //网络请求相关的方法
    getHomeMultidata(){
      getHomeMultidata().then((value)=>{
        this.lunboList=value.data.banner.list;//轮播图的数据
        this.recommends=value.data.recommend.list;//推荐内容的数据
        this.featureList=value.data.keywords.list;//存放推荐的数据(8个元素)
      },(reason)=>{
        console.log(reason);
      });
    },
    getHomeGoods(type){
      const page=this.goods[type].page;
      getHomeGoods(type,page)
        .then((value)=>{
          this.goods[type].list.push(...value.data.list);
          this.goods[type].page++;
        },(reason)=>{
          console.log(reason)
        })
    },
    /**
     * 关于 emit 的事件
     */
    tabClick(tagName){
      this.tagName=tagName;
      this.scrollTop=4500;
    },
  },
  mounted() {
    window.addEventListener('scroll',()=>{
      let a=document.documentElement.scrollTop || document.body.scrollTop;
      if (a>=this.scrollTop){
        this.scrollTop+=this.scrollTop;
        this.getHomeGoods(this.tagName);
      }
    });
  }
}
</script>

<style scoped>
  #home{
    width: 100%;
    padding: 50px 0;
  }
</style>
